<template>
  <div class="wrapper">
    <dx-header-bar title="业务概览"></dx-header-bar>
    <div class="content-wrapper">
      <div class="panel">
        <div class="title">全省概览</div>
        <dx-e-chart class="chart" ref="chartCpt"
                    :color="['#2f86f6', '#ff9a3f']"
                    :show-legend="true"
                    :x-axis-data="chartXAxisData"
                    :series="chartSeries">
        </dx-e-chart>
      </div>
      <div class="panel">
        <div class="title">地市客户数</div>
        <dx-e-chart class="chart" ref="chartCptCustomer"
                    :color="['#ff9a3f']"
                    :x-axis-vertical="true"
                    :x-axis-data="chartXAxisCustomer"
                    :series="chartSeriesData">
        </dx-e-chart>
      </div>

      <div class="panel">
        <div class="title">地市业务数</div>
        <dx-e-chart class="chart" ref="chartCptService"
                    :color="['#2f86f6']"
                    :x-axis-vertical="true"
                    :x-axis-data="chartXAxisCustomer"
                    :series="chartSeriesService">
        </dx-e-chart>
      </div>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
          <th>时间</th>
          <th>地市</th>
          <th>业务数</th>
          <th>客户数</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in viewityList" :key="index">
          <td>
            {{item.DATE_TIME}}
          </td>
          <td>
            {{item.REGION}}
          </td>
          <td>
            {{item.CUSTOMER_TOTAL}}
          </td>
          <td>
            {{item.SERVICE_TOTAL}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  Dialog,
  Toast
} from 'mand-mobile';
import { DxHeaderBar, DxEChart } from '@/components';
import { getOverViewProvince, getOverViewity } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart
  },
  data() {
    return {
      dataList: [],
      viewityList: [],
      chartXAxisData: [],
      chartSeries: [],
      chartXAxisCustomer: [],
      chartSeriesData: [],
      chartSeriesService: []
    };
  },
  mounted() {
    this.initData();
    this.getViewityList();
  },

  created() {
  },
  methods: {
    initData() {
      this.$refs.chartCpt.showLoading();
      getOverViewProvince().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.dataList = data;
          this.extracDataLine();
        } else {
          Dialog.alert({
            title: '提示',
            content: '没有找到相关数据',
            confirmText: '确定'
          });
        }
      }).catch(() => {
        Toast.failed('数据加载失败');
        this.$refs.chartCpt.hideLoading();
      });
    },
    getViewityList() {
      this.$refs.chartCptCustomer.showLoading();
      getOverViewity().then(result => {
        const data = result.data;
        data.pop();
        if (data instanceof Array && data.length) {
          this.viewityList = data;
          this.extracDataBar();
        } else {
          Dialog.alert({
            title: '提示',
            content: '没有找到相关数据',
            confirmText: '确定'
          });
        }
      }).catch(() => {
        Toast.failed('数据加载失败');
        this.$refs.chartCptCustomer.hideLoading();
      });
    },
    extracDataLine() {
      const xAxisData = [];
      const seriesData = [];
      const seriesData2 = [];
      this.dataList.forEach(item => {
        const timeType = item.date_time.substring(5, item.date_time.length - 1);
        if (timeType === '0') {
          xAxisData.push(`${item.date_time.substring(item.date_time.length - 1, item.date_time.length)}月`);
        } else {
          xAxisData.push(`${item.date_time.substring(5, item.date_time.length)}月`);
        }
        seriesData.push(item.customer_total);
        seriesData2.push(item.service_num);
      });
      this.chartXAxisData = [xAxisData];

      this.chartSeries = [
        {
          type: 'line',
          name: '客户数',
          data: seriesData
        },
        {
          type: 'line',
          name: '业务数',
          data: seriesData2
        }
      ];
      this.$nextTick(() => {
        this.$refs.chartCpt.updateChart();
      });
    },
    extracDataBar() {
      const xAxisData = [];
      const seriesCustomerData = [];
      const seriesServiceData = [];
      this.viewityList.forEach(item => {
        xAxisData.push(item.REGION);
        seriesCustomerData.push(item.CUSTOMER_TOTAL);
        seriesServiceData.push(item.SERVICE_TOTAL);
      });
      this.chartXAxisCustomer = [xAxisData];

      this.chartSeriesData = [
        {
          type: 'bar',
          data: seriesCustomerData
        }
      ];
      this.chartSeriesService = [
        {
          type: 'bar',
          data: seriesServiceData
        }
      ];
      this.$nextTick(() => {
        this.$refs.chartCptCustomer.updateChart();
        this.$refs.chartCptService.updateChart();
      });
    }
  }
};
</script>

<style lang="stylus" scoped>

  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .content-wrapper
    flex : 1
    overflow-y : auto
    font-size : 28px

  .panel
    margin-top : 20px
    background : #fff

  .title
    padding : 20px
    font-size : 32px
    line-height : 32px
    border-bottom : 1px solid #eee
    font-weight : bold
    &:before
      content : ""
      display : inline-block
      margin-right : 10px
      vertical-align : bottom
      height : 30px
      width : 7px
      background : #ff9a3f
      border-radius : 10px

  .chart
    padding : 20px
    height : 400px
    width : 100%

  table
    margin-top : 20px
    line-height : 38px
    background : #fff
    text-align : center
    font-size : 28px

  th, td
    padding : 20px 8px
    border-bottom : 1px solid #eee
    border-right : 1px solid #eee

  thead
    tr
      background : #f5f9fe
</style>
